<html>
    <head>
        <title>课设</title>
        <link  rel="stylesheet" href="css1.css" type="text/css" >
        <link  rel="stylesheet" href="css2.css">
        <link  rel="stylesheet" href="css3.css">
        <link  rel="stylesheet" href="css4.css">
    </head>
    <body>
        <div class="container container-appbar">
            <header class="appbar">
              <a class="logo">MDClub</a>
              <div class="spacer"></div>
              <div class="item dropdown">
                <a>文档</a>
                <div class="dropdown-content">
                  <a>安装指南</a>
                  <a>REST API 文档</a>
                  <a>JavaScript SDK 文档</a>
                </div>
              </div>
              <a class="item" target="_blank">社区</a>
              <div class="item dropdown">
                <a>Github</a>
                <div class="dropdown-content">
                  <a">mdclub</a>
                  <a">mdclub-theme-material</a>
                  <a>mdclub-admin</a>
                  <a>mdclub-openapi</a>
                  <a>mdclub-sdk-js</a>
                </div>
              </div>
            </header>
          </div>
          <div class="banner">
            <div class="container">
              <h1>更好用的现代化开源论坛系统</h1>
              <div class="meta">MDClub 漂亮、轻量且好用，它能让在线讨论变得更加轻松愉悦</div>
              <div class="actions">
                <a class="btn btn-large" target="_blank">在线体验</a>
                <a class="btn btn-large">立即下载</a>
              </div>
            </div>
          </div>
          <div class="feature material">
            <div class="container">
              <h2>Material Design 设计语言</h2>
              <div class="meta">得益于优秀的 <a>MDUI</a> 框架，使得 MDClub 的 UI 层次分明，动画流畅</div>
              <div class="cover shadow"></div>
            </div>
          </div>
          <div class="feature responsive">
            <div class="container">
              <h2>响应式设计</h2>
              <div class="meta">从小屏手机，到大屏桌面显示器，都能自动适配</div>
              <div class="row clearfix">
                <div class="col image">
                  <div class="cover"></div>
                </div>
                <div class="col text">
                  <ul>
                    <li>用同一套代码适配了所有设备，降低了维护难度</li>
                    <li>面对层出不穷的设备，响应式设计都能自动适配</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="feature lightweight">
            <div class="container">
              <h2>超级轻量级</h2>
              <div class="meta">使用了轻量的 <a>MDUI</a> 框架，即使在慢速网络下，也能迅速加载</div>
              <div class="row clearfix">
                <div class="col">
                  <ul>
                    <li>资源文件的大小直接影响网页加载速度，MDClub 的资源文件足够小，使网络环境较差的用户也能快速访问</li>
                    <li>同时也能极大地节省服务器带宽成本</li>
                  </ul>
                </div>
                <div class="col">
                  <div class="items">
                    <div class="item active">
                      <label>MDClub</label>
                      <div class="content">
                        <span class="graph" style="width: 7.7%"></span>
                        <span class="size">98 KB</span>
                      </div>
                    </div>
                    <div class="item">
                      <label>Flarum</label>
                      <div class="content">
                        <span class="graph" style="width: 21%"></span>
                        <span class="size">264 KB</span>
                      </div>
                    </div>
                    <div class="item">
                      <label>NodeBB</label>
                      <div class="content">
                        <span class="graph" style="width: 24%"></span>
                        <span class="size">296 KB</span>
                      </div>
                    </div>
                    <div class="item">
                      <label>Discourse</label>
                      <div class="content">
                        <span class="graph" style="width: 72%"></span>
                        <span class="size">914 KB</span>
                      </div>
                    </div>
                    <div class="item">
                      <label></label>
                      <div class="content">
                        <span class="size">gzip 压缩后 CSS + JavaScript 总大小</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="feature dark-mode">
                <div class="container">
                  <h2>自动适配暗色模式</h2>
                  <div class="meta">根据操作系统的主题，自动切换亮色主题和暗色主题</div>
                  <div class="row clearfix">
                    <div class="col image">
                      <div class="cover"></div>
                    </div>
                    <div class="col text">
                      <ul>
                        <li>你可以在夜间开启暗色模式，更护眼，且更省电</li>
                        <li>自动跟随操作系统的主题，无需在 MDClub 中频繁切换主题</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature seo">
                <div class="container">
                  <h2>单页面应用，且完美支持 SEO</h2>
                  <div class="meta">首屏由服务端输出，次屏通过 Ajax 加载，兼顾了 SEO 和用户体验</div>
                  <div class="row clearfix">
                    <div class="col first-screen code">
                      <pre>&lt;!DOCTYPE html&gt;
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;MDClub&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;p&gt;自豪地使用 MDClub&lt;/p&gt;
            &lt;/body&gt;
        &lt;/html&gt;</pre>
                      <ul>
                        <li>首屏由服务端输出完整 HTML 页面</li>
                      </ul>
                    </div>
                    <div class="col secondary-screen code">
                      <pre>
        {
            "code": 0,
            "data": {
            "question_id: 1,
            "user_id": 10000,
                "title": "MDClub 的第一个提问",
                 ......
            }
        }</pre>
                      <ul>
                        <li>次屏仅输出 JSON，由客户端渲染</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature editor">
                <div class="container">
                  <h2>定制的富文本编辑器</h2>
                  <div class="meta">使用了自主开发的富文本编辑器，和系统完美兼容</div>
                  <div class="row clearfix">
                    <div class="col image">
                      <div class="cover"></div>
                    </div>
                    <div class="col text">
                      <ul>
                        <li>编辑器的设计灵感来自 Gmail，它非常简洁易用</li>
                        <li>你可以把它最大化后专注于内容编辑；也可以将它置于右下角，边编辑边浏览其他内容</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature install">
                <div class="container">
                  <h2>方便安装</h2>
                  <div class="meta">无需具备任何编程知识，30秒完成安装</div>
                  <div class="row clearfix">
                    <div class="col text">
                      <ul>
                        <li>几乎任何低端主机都能运行 MDClub</li>
                        <li>只需将代码上传到服务器，然后在浏览器中访问它，即可</li>
                      </ul>
                    </div>
                    <div class="col image">
                      <div class="cover shadow"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature restful">
                <div class="container">
                  <h2>强大的 Restful API 接口</h2>
                  <div class="meta">应用的所有功能都通过 200 多个 Restful API 开放</div>
                  <div class="row clearfix">
                    <div class="col image">
                      <div class="cover shadow"></div>
                    </div>
                    <div class="col text">
                      <ul>
                        <li>使用这些接口，你可以自行开发 MDClub 的前端页面和 APP</li>
                        <li>也可以把 MDClub 提供的数据用于其他项目</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="feature openapi">
                <div class="container">
                  <h2>OpenAPI 规范的文档</h2>
                  <div class="meta">API 文档完全使用 OpenAPI 规范，拥有庞大的 <a">OpenAPI 生态资源</a></div>
                  <div class="row clearfix">
                    <div class="col text">
                      <ul>
                        <li>OpenAPI 是描述 API 的最佳规范</li>
                        <li>它拥有生成模拟数据、驱动测试自动化、生成多种语言的 SDK 等非常多的功能</li>
                      </ul>
                    </div>
                    <div class="col code">
                      <pre>
openapi: 3.0.2
info:
    title: MDClub API
    description: MDClub 是一个 Material Design 风格的社区应用
    version: 1.0.0
servers:
    - url: /api
        description: 当前服务器
paths:
    /questions:
        get:
            summary: 获取提问列表
            parameters:
                - $ref: '#/components/parameters/page'
                - $ref: '#/components/parameters/per_page'
                - $ref: '#/components/parameters/order.questions'
                - $ref: '#/components/parameters/include.question'
                - $ref: '#/components/parameters/question_id.query'
                - $ref: '#/components/parameters/user_id.query'
                - $ref: '#/components/parameters/topic_id.query'
                - $ref: '#/components/parameters/trashed.query'
            responses:
                '200':
                    $ref: '#/components/responses/Questions'
                default:
                    $ref: '#/components/responses/Error'</pre>
                    </div>
                  </div>
                </div>
            </div>
            <div class="feature sdk">
                <div class="container">
                  <h2>多平台 JavaScript SDK</h2>
                  <div class="meta">提供了 JavaScript SDK，可用于多个 JS 框架，及多种小程序平台</div>
                  <div class="row clearfix">
                    <div class="col image">
                      <div class="cover shadow"></div>
                    </div>
                    <div class="col text">
                      <ul>
                        <li>SDK 使用 TypeScript 开发，拥有完善的类型提示</li>
                        <li>使用 SDK，比直接调用 Restful API 接口更便捷</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <footer class="footer">
                <div class="container">
                  <div class="row clearfix">
                    <div class="col">
                      <h4>社区</h4>
                      <ul>
                        <li>
                          <a href=" " target="_blank">MDClub 社区</a>
                        </li>
                        <li>
                          <a href=" " target="_blank">Github issue</a>
                        </li>
                      </ul>
                    </div>
                    <div class="col">
                      <h4>资源</h4>
                      <ul>
                        <li>
                          <a href=" " target="_blank">MDUI 前端框架</a>
                        </li>
                      </ul>
                    </div>
                    <div class="col sponsor">
                      <h4>赞助该项目</h4>
                      <ul>
                        <li>MDClub 是一个基于 MIT 协议的开源项目，你可以通过捐赠的形式来帮助发展该项目。</li>
                      </ul>
                      <div class="sponsor-items">
                        <img src="22.jpg" loading="lazy" title="通过支付宝捐赠" />
                        <img src="22.jpg" loading="lazy" title="通过微信捐赠" />
                      </div>
                    </div>
                  </div>
                  <div class="divider"></div>
                  <div class="copyright">Copyright © 2020</div>
                </div>
              </footer>
    </body>
</html>